<template>
  <div class="products-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.name"
        placeholder="商品名称"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
    </div>

    <el-row :gutter="20">
      <el-col :span="6" v-for="item in list" :key="item.id" class="product-item">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <div class="product-image">
            <img :src="item.image ? 'http://localhost:8080/api' + item.image : ''" alt="商品图片">
          </div>
          <div class="product-info">
            <h3 class="product-name">{{ item.name }}</h3>
            <div class="product-brand">品牌：{{ item.brandName }}</div>
            <div class="product-price">¥{{ item.price }}</div>
            <div class="product-description">{{ item.description }}</div>
            <div class="product-actions">
              <el-input-number v-model="item.quantity" :min="1" :max="10" size="mini" />
              <el-button type="primary" size="mini" @click="addToCart(item)">加入购物车</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[8, 16, 24, 32]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </div>
  </div>
</template>

<script>
import { getProductList } from '@/api/product'
import { getAllBrands } from '@/api/brand'
import { addToCart } from '@/api/cart'

export default {
  name: 'CustomerProducts',
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 8,
        name: undefined,
        brandId: undefined
      },
      brandOptions: [],
      tempProduct: {
        id: undefined,
        quantity: 1
      }
    }
  },
  created() {
    this.getList()
    this.getBrands()
  },
  methods: {
    getList() {
      this.listLoading = true
      const params = {
        current: this.listQuery.page,
        size: this.listQuery.limit,
        keyword: this.listQuery.name
      }
      
      getProductList(params, this.listQuery.brandId).then(response => {
        this.list = response.data.records.map(item => {
          item.quantity = 1
          return item
        })
        this.total = response.data.total
        this.listLoading = false
      }).catch(error => {
        console.error('获取商品列表失败:', error)
        this.listLoading = false
      })
    },
    getBrands() {
      getAllBrands().then(response => {
        this.brandOptions = response.data
      })
    },
    handleFilter() {
      console.log('搜索参数:', {
        name: this.listQuery.name,
        brandId: this.listQuery.brandId
      })
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    addToCart(item) {
      addToCart({
        productId: item.id,
        quantity: item.quantity
      }).then(() => {
        this.$message({
          message: '添加购物车成功',
          type: 'success',
          duration: 2000
        })
      }).catch(error => {
        console.error('添加购物车失败:', error)
      })
    }
  }
}
</script>

<style scoped>
.products-container {
  padding: 20px;
}

.filter-container {
  margin-bottom: 20px;
}

.filter-item {
  margin-right: 10px;
}

.product-item {
  margin-bottom: 20px;
}

.product-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  padding: 14px;
}

.product-name {
  margin: 0;
  font-size: 16px;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-brand {
  font-size: 14px;
  color: #606266;
  margin: 5px 0;
}

.product-price {
  font-size: 16px;
  color: #f56c6c;
  font-weight: bold;
  margin: 5px 0;
}

.product-description {
  font-size: 13px;
  color: #909399;
  margin: 5px 0;
  height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-actions {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-container {
  margin-top: 30px;
  text-align: center;
}
</style> 